<div class="box-container">
    <p class="process-bar" (click)="openProgressModal()">
        <b><i nz-icon nzType="clock-circle" nzTheme="fill" class="yellow"></i> &nbsp;报送进度:</b>&nbsp;
        已报/未报:&nbsp;
        <span class="green">{{reportFinished}}</span>/
        <span class="red">{{reportUnfinished}}</span>&nbsp;
        <span class="green">（占比{{reportPercentage}}%）</span>&nbsp;
        &nbsp;湖泊湿地补水总量:&nbsp; <span class="green"> {{lakeTotal}} </span>万m³
    </p>
    <div class="main-content">
        <div class="main-content-wrap">
            <div class="left-panel">
                <ul nz-menu nzMode="inline" class="water-takes-left-menu">
                    <li nz-menu-item
                        *ngFor="let item of listData; let idx = index"
                        [nzSelected]="idx === 0"
                        (click)="selectedAreaChanged(item.id)">
                        {{item.name}}
                    </li>
                </ul>
            </div>

            <div class="right-panel">
                <div class="right-top-box">
                    <div class="content-top-bar">
                        <div class="right-title">{{contentTitle}}</div>

                        <div class="right-ctrl-box">
                            <div style="margin-right: 20px">(用水量单位： 万m³)</div>
                            <div>
                                日期：
                                <nz-date-picker [ngModel]="today" nzDisabled></nz-date-picker>
                            </div>

                            <div class="custom-btn-group">
                                <a class="top-bar-btn" (click)="openDetailModal()">
                                    <i nz-icon nzType="history" nzTheme="outline"></i> 历史记录
                                </a>
                                <a class="top-bar-btn" (click)="export()">
                                    <i nz-icon nzType="file-excel" nzTheme="outline"></i> 导出
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="right-top-content">
                        <div style="width: 100%">
                            <nz-table
                                #groupingTable
                                class="main-table"
                                [nzData]="tableData"
                                [nzLoading]="loading"
                                nzBordered
                                [nzFrontPagination]="false"
                                nzSize="middle">
                                <thead>
                                <tr class="custom-head">
                                    <th colspan="2">名称</th>
                                    <th>昨日补水量（万m³）</th>
                                    <th>累计补水量（万m³）</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr *ngFor="let data of groupingTable.data;index as i" [class]="{'even':i % 2 === 1}" (click)="selectedRow(data)">
                                    <td [attr.rowspan]="calcRowspan(i, data.prId)" *ngIf="isTdShow(i, data.prId)"
                                        [attr.colspan]="calcColspan(i, data.prId)">{{data.prName}}</td>
                                    <td *ngIf="isColTdShow(i, data.prId)">{{data.rrName}}</td>
                                    <td>{{data.val}}</td>
                                    <td>{{data.valTotal}}</td>
                                </tr>
                                </tbody>
                            </nz-table>
                        </div>
                    </div>
                </div>
                <div class="right-bottom-box">
                    <div class="charts-container">
                        <div echarts [options]="basicOpts" [merge]="customOpts" class="charts-cell"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<nz-modal class="custom-modal" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
          (nzOnCancel)="onCancel()" (nzOnOk)="onCancel()" nzWidth="900">
    <div>
        日期： <nz-date-picker [(ngModel)]="datePicker" (ngModelChange)="queryInfo($event)"></nz-date-picker>
    </div>

    <div>
        <nz-table
            #groupingTable1
            [nzData]="modaltableData"
            nzBordered
            [nzFrontPagination]="false"
            nzSize="middle"
        >
            <thead>
            <tr>
                <th colspan="2">名称</th>
                <th>昨日补水量（万m³）</th>
                <th>累计补水量（万m³）</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of groupingTable1.data;index as i">
                <td [attr.rowspan]="calcRowspan(i, data.prId)" *ngIf="isTdShow(i, data.prId)"
                    [attr.colspan]="calcColspan(i, data.prId)">{{data.prName}}</td>
                <td *ngIf="isColTdShow(i, data.prId)">{{data.rrName}}</td>
                <td>{{data.val}}</td>
                <td>{{data.valTotal}}</td>
            </tr>
            </tbody>
        </nz-table>
    </div>

</nz-modal>
<nz-modal class="custom-modal" nzWidth="900" [(nzVisible)]="progressModalShow" nzTitle="湖泊湿地补水报送情况"
          (nzOnCancel)="closeProgressModal()" [nzFooter]="null">
    <nz-table
        #dataTable
        nzBordered
        nzShowPagination
        [nzPageSize]="10"
        [nzData]="progressData"
        nzSize="middle">
        <thead>
        <tr>
            <th>管理处</th>
            <th>报送状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let row of dataTable.data">
            <td>{{ row.frName }}</td>
            <td [ngClass]="{'green': row.statu === 2, 'red': row.statu === 1}">{{ row.status }}</td>
            <td>
                <a class="red" *ngIf="row.statu === 1">通知</a>
            </td>
        </tr>
        </tbody>
    </nz-table>
</nz-modal>
